<template>
  <div>
    <div class="tab">
      <ul class="area">
        <li
          v-for="(item, index) in areaList"
          :key="index"
          @click="clickArea(item)"
          :class="hoverArea == item ? 'active' : ''"
        >
          {{ item }}
        </li>
      </ul>
      <ul class="type">
        <li
          v-for="(item, index) in typeList"
          :key="index"
          @click="clickType(item)"
          :class="hoverType == item ? 'active' : ''"
        >
          {{ item }}
        </li>
      </ul>
      <ul class="order">
        <li
          v-for="(item, index) in orderList"
          :key="index"
          @click="clickOrder(item)"
          :class="hoverOrder == item ? 'active' : ''"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="mvlist">
      <mv-item
        v-for="(item,index) in mvList"
        :key="index"
        :imgUrl="item.cover"
        :tilte="item.name"
        :authorList="item.artists"
        :playCount="item.playCount"
        :id="item.id"
      ></mv-item>
    </div>
  </div>
</template>

<script>
import { getMvAllAPI } from "@/api";
import MvItem from "@/components/MVItem.vue";
export default {
  name: "MvRecom",
  components: { MvItem },
  data() {
    return {
      areaList: ["全部", "内地", "港台", "欧美", "日本", "韩国"],
      typeList: ["全部", "官方版", "原生", "现场版", "网易出品"],
      orderList: ["上升最快", "最热", "最新"],
      hoverArea: "全部", //选中的地区
      hoverType: "全部", //选中的类型
      hoverOrder: "上升最快", //选中的排序
      offset: 0, //偏移数量
      mvList: [],  //MV列表
      canLoad:true,   //控制触底
    };
  },
  methods: {
    // 点击tab切换
    clickArea(value) {
      this.offset = 0;
      this.hoverArea = value;
      this.mvList = [];
      this.getMvAll();
    },
    clickType(value) {
      this.offset = 0;
      this.hoverType = value;
      this.mvList = [];
      this.getMvAll();
    },
    clickOrder(value) {
      this.offset = 0;
      this.hoverOrder = value;
      this.mvList = [];
      this.getMvAll();
    },
    // 发送请求获取视频列表
    async getMvAll() {
      const res = await getMvAllAPI({
        area: this.hoverArea,
        type: this.hoverType,
        order: this.hoverOrder,
        offset: this.offset,
      });
      if (res.data.code == 200) {
        this.offset += 30;
        console.log(res.data.data);
        this.mvList = [...this.mvList, ...res.data.data];
        this.canLoad = true;
      } else {
        alert("网络错误!");
      }
    },
  },
  computed:{
    main(){
      return this.$store.state.scroll.main;
    }
  },
  created() {
    this.getMvAll();
    this.main.addEventListener("scroll", (e) => {
      if (this.$route.name == "mvrecom") {
        let isLoadMore = e.target.scrollHeight - e.target.scrollTop - e.target.offsetHeight <10;
        if (isLoadMore && this.canLoad) {
          this.canLoad = false;
          this.getMvAll();
        }
      }
    });
  },
};
</script>

<style lang="less" scoped>
.tab {
  width: 100%;
  margin: 0px 0 15px 24px;
  margin-left: 24px;
  margin-bottom: 15px;
  ul {
    width: 80%;
    display: flex;
    margin-bottom: 8px;
    li {
      float: left;
      font-size: 14px;
      font-weight: lighter;
      padding: 4px 6px 4px 6px;
      margin-right: 10px;
      cursor: pointer;
    }
    .active {
      background-color: rgb(254, 248, 250);
      color: #ff7a9e;
      border-radius: 16px;
    }
  }
}
.mvlist {
  margin: 0 auto;
  width: 95%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>